<template>
  <a-layout style="height: 746px">

    <!--  侧边栏  -->
    <a-layout-sider theme="dark"  v-model:collapsed="collapsed" :trigger="null" collapsible >
      <div class="logo" />

      <router-link :to="path">
        <a-menu
          theme="dark"
          v-model:openKeys="state.openKeys"
          v-model:selectedKeys="state.selectedKeys"
          mode="inline"
          :inline-collapsed="state.collapsed"
          :items="items"
        ></a-menu>
      </router-link>

    </a-layout-sider>
    <a-layout>

    <!--  头部    -->
      <a-layout-header class="awsCenter" style="background: #fff; padding: 0;border: 0px black solid;display: flex;flex-direction: row">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />

        <menu-fold-outlined  v-else class="trigger" @click="() => (collapsed = !collapsed)" />

        <text style="margin-left: 20px;font-weight: bolder;font-family: FangSong;
  font-size: 15px;color: black">{{front}} {{modelTitle}}</text>

        <div style="display: flex;margin-left: auto;border: 0px black solid;margin-right: 20px;height: 50px">
          <img v-if="userData.gender!=='女'" style="width: 60px" src="../assets/boy.png">
          <img v-else style="width: 60px" src="../assets/girl.png">
          <div style="border: 0px blue solid;" class="awsCenter">
            <el-col :span="8">
              <el-dropdown trigger="click">
              <span style="display: flex;flex-direction: row;margin-top: 25px;"  >
                <text style="font-family: 'STSong';width: 50px;border: 0px black solid">{{userData.username}}</text>
                <el-icon ><arrow-down /></el-icon>
              </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </div>


        </div>

      </a-layout-header>

    <!--   内容   -->
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>

  </a-layout>
</template>
<script lang="ts" setup>
import router from "@/router/index.js";
import { ElMessage, ElNotification } from 'element-plus'
import {useUserStore} from "@/stores/user/user.js";
import { ArrowDown,Plus } from '@element-plus/icons-vue'
const userStore=useUserStore()





const logOut=(()=>{
  ElMessage.success("退出登录")
  userStore.logout()
  router.push('/')
})

const userData=ref({})
onMounted( async () => {
  const defaultSelectedKey = 'introducing'
  const parentKey = 'introducing' // 父菜单 key

  state.selectedKeys = [defaultSelectedKey]
  state.openKeys = [parentKey]

  // 可以触发一次 getByKey 来更新 front 和 modelTitle
  getByKey(state)

  //查询当前用户信息，如果有信息直接进行登录
  try {
    await getUser()
  }catch (error){
    console.log(error)
  }
  if (userStore.user){
    userData.value=userStore.user
    console.log(userData.value)
  }

});


const getUser=(async ()=>{
  const res=await getUserService()
  //console.log(res)
  if (res&&res.code===200){
    //存储用户信息
    userStore.setUser(res.data)
    //跳转到导航页
    if (res.data!==null){
      await router.push('/layout')
    }
  }
})
import {h, onMounted, reactive, ref, watch} from 'vue';
import {
  CalendarOutlined,
  ProfileFilled,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  SolutionOutlined,
  FileTextOutlined,
  MessageOutlined,

} from '@ant-design/icons-vue';
import { checkConService, getUserService } from '@/api/user.js'
const collapsed = ref<boolean>(false);

const state = reactive({
  collapsed: false,
  selectedKeys: [],
  openKeys: [],
  preOpenKeys: [],
});
const items = ref([
  {
    key: 'introducing',
    icon: () => h(UserOutlined), // 更换为用户管理相关的图标
    label: '信息管理',
    title: '信息管理',
    children: [
      {
        key: 'introducing',
        icon: () => h(UserOutlined), // 用户信息图标
        label: '信息导入',
        title: '信息导入',
        path: '/layout/introducing'
      },
      {
        key: 'scheduling',
        icon: () => h(SolutionOutlined), // 咨询师信息图标
        label: '分段调度与查询',
        title: '分段调度与查询',
        path: '/layout/scheduling'
      },
      {
        key: 'evaluate',
        icon: () => h(ProfileFilled), // 咨询师信息图标
        label: '评估展示',
        title: '评估展示',
        path: '/layout/counselor'
      },
    ]
  },
  {
    key: 'Recording',
    icon: () => h(FileTextOutlined), // 更换为记录管理相关的图标
    label: '记录管理',
    title: '记录管理',
    children: [
      {
        key: 'booking',
        icon: () => h(CalendarOutlined), // 预约记录图标
        label: '预约记录',
        title: '预约记录',
        path: '/layout/booking'
      },
      {
        key: 'feedback',
        icon: () => h(MessageOutlined), // 反馈记录图标
        label: '反馈记录',
        title: '反馈记录',
        path: '/layout/feedback'
      },
    ]
  }
]);

const path=ref('/layout/introducing')
const getByKey=((value)=>{
  const openKey=value.openKeys[0]
  const selectKey=value.selectedKeys[0]

  for (let i = 0; i < items.value.length; i++) {
    const list=items.value[i].children
    if (list!=null){
      for (let j = 0; j < list.length; j++) {
        if (openKey){
          if (list[j].key===selectKey){
            path.value=list[j].path
            front.value=items.value[i].title
            modelTitle.value='/ '+list[j].title
          }
        }
      }
    }else {
      if (items.value[i].key===selectKey){
        path.value=items.value[i].path
        front.value=items.value[i].title
        modelTitle.value=''
      }

    }
  }



})
const front=ref("信息导入")

const modelTitle=ref('')

// 监听 count 的变化
watch(state, (newVal, oldVal) => {
  getByKey(newVal)
});



</script>
<style>


.awsCenter{
  display: flex;
  align-items: center;
}

.logo{
  height: 100px;
  margin-bottom: 20px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>
